@charset "UTF-8";
@import "_variable";
@import (reference) "_position";
//用户列表（个人中心）
.fb-user-form {
  @user: .user;
  @item-height: 50px;
  @head-height: 70px;
  .d-width;
  @{user}-list {
    .p-rel;
    .d-width;
    padding: 0 15px;
    background: @white;
    margin-bottom: 15px;
    &.bd-top {
      border-top: 1px solid #e8e8e8;
    }
    &.bd-bto {
      border-bottom: 1px solid #e8e8e8;
    }
    &.bd-tb {
      border-top: 1px solid #e8e8e8;
      border-bottom: 1px solid #e8e8e8;
    }
    &.transparent {
      background: transparent;
    }
    &@{user}-head {
      height: auto;
      padding: 10px 15px;
      @{user}-item {
        height: 100%;
      }
    }
    @{user}-item {
      .d-flex;
      .flex-align;
      .flex-justify(space-between);
      width: 100%;
      height: @item-height;
      border-bottom: 1px solid #e8e8e8;
      font-size: @fs-14;
      color: #444444;
      &:last-of-type {
        border-bottom: 0 none;
      }
      &@{user}-custom {
        height: auto;
      }
      > a.link {
        .d-flex;
        .flex-align;
        .flex-justify(space-between);
        width: 100%;
        height: 100%;
        color: #444444;
        > span {
          .d-flex;
          .flex-align;
          .flex-justify(space-between);
          > em {
            width: 8px;
            color: #c80a32;
            font-size: @fs-16;
            margin-right: 5px;
          }
        }
      }
      label.image {
        .d-flex;
        .flex-align;
        .flex-justify(space-between);
        padding: 10px 0;
        img {
          width: 60px;
          height: 60px;
        }
        span {
          margin-left: 10px;
        }
        em {
          .d-width;
          font-size: @fs-12;
          &.name {
            font-size: @fs-15;
            font-weight: bold;
            margin-bottom: 2px;
          }
        }
      }
      div.cont {
        .p-rel;
        .d-flex;
        .flex-align;
        .flex-direction(row-reverse);
        width: 70%;
        text-align: right;
        padding-right: 20px;
        height: 100%;
        &.none-text {
          width: 10%;
        }
        img {
          width: 50px;
          height: 50px;
        }
        input[type="file"] {
          .abs-tl;
          .d-layer;
          .fn-set-opacity-n(0);
        }
        em {
          text-align: left;
          .tm-ellipsis;
          color: @g-666;
          font-size: @fs-14;
          &.def {
            color: @g-999;
          }
        }
        &.none-icon:after {
          content: none;
        }
        &:after {
          //&:extend(.icon, .icon-arrow all);
          content: "";
          .abs-t-mid-r;
          margin-top: -9px;
          .fn-set-transform(scale(0.7));
        }
        .fb-switch {
          .abs-t-mid-r;
          margin-top: -12px;
        }
      }
    }
  }

  .intro {
    margin-top: -10px;
    margin-bottom: 20px;
  }
}

//用户表单（登录注册）
.fb-user-list {
  @h: 50px;
  .d-width;

  &.small {
    .item-text {
      .text-mid-line(28px);
      > span {
        font-size: @fs-12;
      }
    }
  }

  .item {
    @pad-left: 45px;
    .d-width;
    padding-left: @pad-left;
    margin-top: 10px;
    &:first-of-type {
      margin-top: 0;
    }
    > label {
      .p-rel;
      .d-width;
      .text-mid-line(@h);
      border-bottom: 1px solid #e8e8e8;
      padding-right: @h;
      &.code {
        @w: 120px;
        padding-right: @w;
        .code-btn {
          .d-block;
          width: @w;
          font-size: @fs-14;
          color: @main;
          .abs-tr;
          text-align: right;
          &.active {
            color: @g-ccc;
          }
        }
      }
      a.clean-btn {
        .abs-tr;
        .d-none;
        width: @h;
        height: 100%;
        i {
          .abs-tl-mid;
          .fn-set-transform(scale(0.6));
        }
      }
      > i {
        .p-abs;
        .fn-pos-tl(50%, -@pad-left);
        .fn-set-transform(scale(0.7));
      }
      > input {
        .d-layer;
        font-size: @fs-13;
        border: 0 none;
        background: transparent;
        border-radius: 0;
      }
    }
  }

  .item-text {
    .d-width;
    .text-mid-line(48px);
    padding-left: 90px;
    &.small {
      .text-mid-line(26px);
    }
    > span {
      .d-width;
      font-size: @fs-14;
      &.t {
        .p-abs;
        .fn-pos-tl(50%, 0);
        width: 85px;
        .text-mid-line(30px);
        margin-top: -15px;
        color: @g-333;
      }
      &.c {
        color: @g-666;
      }
    }
  }

  .form-btn {
    margin-top: 30px;
    margin-bottom: 15px;
    a.fb-btn {
      .border-radius(50px);
      margin-top: 90px;
      margin-bottom: 20px;
      .text-mid-line(50px);
      font-size: @fs-18;
      background: @main;
    }
  }
}

//用户动画切换登录注册
.fb-user-animate {
  .p-rel;
  .d-width;
  .user-tab {
    .p-rel;
    .d-block;
    width: 180px;
    margin: 20px auto 30px;
    .animate-item {
      .d-flex;
      .flex-align;
      .flex-direction(row);
      .flex-justify(center);
      a {
        .d-block;
        width: 90px;
        text-align: center;
        font-size: @fs-17;
        color: @black;
        .text-mid-line(46px);
        .fn-set-transition(all .3s);
        &.active {
          color: @main;
        }
      }
    }
    .animate-line {
      .p-abs;
      .fn-pos-bl(2px, 17px);
      .d-block;
      width: 56px;
      height: 2px;
      background: @main;
      .fn-set-transition(all .3s);
      .fn-set-transform-origin(left center);
      &.active {
        .fn-set-transform(rotate(180deg));
      }
    }
  }
  .user-tab-cont {
    .p-rel;
    .d-width;
    .user-box {
      .abs-tl;
      .d-width;
      padding: 0 20px;
      background: @white;
    }
  }
}

//搜索
.search-bar {
  padding: 10px 20px;
  text-align: left;
  .search-list {
    .d-block;
    padding: 0 15px;
    a {
      .d-width;
      color: @g-999;
      font-size: @fs-14;
      .text-mid-line(24px);
      &:extend(.tm-ellipsis);
      margin-top: 10px;
      &:hover {
        color: @main;
      }
    }
  }
  .form-input {
    .d-in-block;
    width: 155px;
    margin-right: 15px;
  }
  a.fb-btn {
    .d-in-block;
    width: 80px;
    margin-right: 25px;
  }
  a.refresh-btn {
    .p-rel;
    font-size: 14px;
    color: #999;
    i {
      display: inline-block;
      position: relative;
      top: 5px;
      right: 5px;
    }
  }
}

//筛选
.filtrate-box {
  .p-rel;
  .d-block;
  padding: 0 5px;
  margin: 30px 0;
  .filtrate-bg {
    .d-block;
    padding: 15px 30px;
    background: @white;
  }
  .item {
    position: relative;
    margin: 10px 0;
    font-size: @fs-14;
    padding-left: 50px;
    > em {
      .d-block;
      .abs-tl;
      width: 50px;
      font-weight: bold;
      color: @g-333;
      .text-mid-line(24px);
    }
    > label, > div.item-list {
      font-size: @fs-14;
      > a, > div.special {
        color: @g-666;
        .d-in-block;
        padding: 0 10px;
        margin: 0 5px 0 0;
        .text-mid-line(24px);
        &:hover, &.active {
          background: @g-f2f2;
          color: @main;
        }
      }
    }
  }
  &.normal {
    padding: 0;
    margin: 0;
    .filtrate-bg {
      position: relative;
      padding: 10px 0;
      .fl-bg {
        .d-block;
        width: 120px;
        height: 100%;
        .abs-tl;
        z-index: 9;
        background: @g-eee;
      }
    }
    .item {
      margin: 0;
      padding-left: 120px;
      background: @g-eee;
      > em {
        top: 10px;
        width: 120px;
        text-align: center;
        background: @g-eee;
      }
      > label, > div.item-list {
        .d-block;
        padding: 10px 15px;
        background: @white;
        > a, > div.special {
          position: relative;
          color: @g-999;
          margin-right: 15px;
          border: 1px solid transparent;
          cursor: pointer;
          &:hover, &.active {
            background: @g-f2f2;
            color: @main;
          }
        }
        > div.special {
          .special-menu {
            .d-none;
            .p-abs;
            top: -2px;
            left: -1px;
            > span {
              border: 1px solid #ddd;
              border-bottom: 1px solid #eee;
              background: #eee;
              display: block;
              width: 94px;
              text-align: center;
              color: @main;
              height: 26px;
              line-height: 26px;
              position: relative;
              z-index: 21;
            }
            > .city-box {
              top: -1px;
              padding: 0;
              border: 1px solid #ddd;
              background: @g-eee;
              .item {
                padding-left: 0;
                .city-list {
                  padding: 5px 10px;
                  a {
                    text-indent: 10px;
                  }
                }
              }
            }
          }
        }
        &.big {
          > a, > div.special {
            width: 109px;
            height: 48px;
            line-height: 46px;
            padding: 0;
            text-align: center;
            border: 1px solid #dddddd;
            margin: 0 22px 10px 10px;
            overflow: hidden;
            &.special {
              border: 1px solid transparent;
              &:hover, &.active {
                background: transparent;
                color: @main;
                border: 1px solid transparent;
              }
            }
            img {
              display: inline-block;
              vertical-align: middle;
            }
            &:hover, &.active {
              background: @white;
              border: 1px solid @main;
            }
          }
          > div.special {
            .p-abs;
            overflow: visible;
            .special-menu {
              top: 7px;
              left: -1px;
              > span {
                width: 109px;
                height: 28px;
                line-height: 30px;
              }
            }
          }
        }
      }
    }
  }
}

/*
*组件样式结构
*页面公用组件
*/
//模拟-下拉列表
.fb-select-box {
  .p-rel;
  .d-block;
  &.active {
    > .hd {
      background: @g-f5f5;
      > span {
        color: @g-999;
      }
      > em {
        .fn-set-transform(rotate(180deg));
        .fn-set-transition(transform 0.3s ease);
      }
    }
    > .bd {
      .d-block;
    }
  }
  > .hd {
    .p-rel;
    .d-block;
    height: 100%;
    padding-left: 10px;
    padding-right: 20px;
    > i {
      top: 5px;
      color: @g-ccc;
      font-size: 21px;
    }
    > span {
      .d-in-block;
      color: @white;
    }
    > em {
      top: 3px;
      color: @g-ccc;
      font-size: 12px;
      .fn-set-transform(scale(0.8));
    }
  }
  > .bd {
    .d-none;
    .p-abs;
    top: 60px;
    left: 0;
    background: @g-f5f5;
  }
}

//form-下拉框
.fb-select-bar {
  position: relative;
  z-index: 1001;
  display: block;
  padding: 0 35px 0 15px;
  border: 1px solid #dddddd;
  cursor: pointer;
  .border-radius(5px);
  background: @white;
  &.error {
    border: 1px solid @error-color;
  }
  &.big {
    label.text {
      .text-mid-line(46px);
    }
    div.list {
      top: 52px;
    }
  }
  label.text {
    display: block;
    width: 100%;
    .text-mid-line(40px);
    font-size: @fs-14;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    &.def {
      color: @g-999;
    }
  }
  b.fb-arrow-dir {
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -3px;
    border: 6px solid;
    border-color: #bebebe transparent transparent transparent;
  }
  div.list {
    position: absolute;
    top: 45px;
    left: -1px;
    display: block;
    width: 100%;
    ul {
      border: 1px solid #dddddd;
      background: @white;
      padding: 10px 15px;
      text-align: left;
      max-height: 200px;
      overflow: auto;
      .border-radius(5px);
      li {
        .text-mid-line(34px);
        a {
          .d-layer;
          font-size: @fs-14;
          cursor: pointer;
          color: @g-333;
          &:hover {
            color: @main;
          }
        }
      }

    }
  }
  .fb-select-list {
    &:extend(.fb-select-bar div.list all);
    z-index: 11111;
    li {
      line-height: 30px;
      a {
        display: inline-block;
      }
    }
  }
}

//form-复选框
.fb-check-box {
  .p-rel;
  .d-flex;
  .flex-align;
  &.active {
    em, > label {
      background: @main;
      border: 1px solid @main;
      &.orange {
        background: #FF7F66;
        border: 1px solid #FF7F66;
      }
      & > i {
        .d-block;
        .abs-tl-mid
      }
    }
  }
  em, > label {
    .p-rel;
    .d-block;
    width: 16px;
    height: 16px;
    .border-radius(3px);
    border: 1px solid #dddddd;
    background: transparent;
    .cursor-pointer;
    margin: 0 5px 0 0;
    & > i {
      .d-none;
    }
    & > input[type="checkbox"] {
      .abs-tl;
      .d-layer;
      .fn-set-opacity-n(0);
      .cursor-pointer;
      margin: 0;
      -webkit-appearance: checkbox;
    }
  }
  span {
    color: @g-999;
    font-size: @fs-14;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
  }
  &.radio-style {
    &:extend(.fb-radio-box all);
  }
}

//form-单选框
.fb-radio-box {
  .p-rel;
  .d-block;
  &.active {
    em {
      & > i {
        .d-block;
        .abs-tl-mid;
        width: 10px;
        height: 10px;
        .border-radius(50%);
        margin: -5px 0 0 -5px;
        background: @main;
        &.orange {
          background: #FF7F66;
        }
      }
    }
  }
  em {
    .p-rel;
    top: 4px;
    .d-in-block;
    width: 16px;
    height: 16px;
    .border-radius(50%);
    border: 1px solid #dddddd;
    background: transparent;
    .cursor-pointer;
    margin: 0 3px 0 0;
    & > i {
      .d-none;
    }
    & > input[type="radio"] {
      .abs-tl;
      .d-layer;
      .fn-set-opacity-n(0);
      .cursor-pointer;
      margin: 0;
      -webkit-appearance: radio;
    }
  }
  span {
    color: @g-999;
    font-size: @fs-14;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
  }
}

//表单列表
.fb-form-list {
  .d-width;
  .item {
    .p-rel;
    .d-block;
    margin-bottom: 25px;
    padding-left: 100px;
    > label.title {
      .abs-tl;
      .d-block;
      width: 100px;
      .text-mid-line(42px);
      font-size: @fs-14;
      color: @g-666;
      text-align: right;
      & > span {
        .p-rel;
        top: 5px;
        right: 5px;
      }
    }
    > .cont {
      .d-width;
      > a.fb-btn.blue, > a.fb-btn.dark {
        width: 202px;
      }
      > .img-ewm {
        .p-rel;
        display: table;
        .border-radius(5px);
        border: 1px solid #dddddd;
        padding: 5px;
        margin-top: 5px;
        &.img-hxt {
          width: 150px;
          > span {
            text-align: center;
          }
        }
        &.img-design {
          .d-in-block;
        }
        &.has-image {
          width: 180px;
        }
        > span.loading {
          display: table-cell;
          vertical-align: middle;
          text-align: center;
          color: @g-999;
          > i {
            .d-block;
            width: 20px;
            height: 20px;
            margin: 0 auto 5px;
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
            -webkit-animation: rotate 1s steps(12, end) infinite;
            -moz-animation: rotate 1s steps(12, end) infinite;
            -o-animation: rotate 1s steps(12, end) infinite;
            animation: rotate 1s steps(12, end) infinite;
          }
        }
        > em.close {
          .fn-set-opacity(0, 0, 0, 0.9);
          .d-block;
          .abs-tr;
          width: 24px;
          height: 24px;
          line-height: 24px;
          margin: -12px -12px 0 0;
          cursor: pointer;
          .border-radius(50%);
          color: @white;
          font-size: @fs-20;
          font-weight: bold;
          text-align: center;
        }
        img {
          .d-width;
        }
        &.img-design {
          width: 160px;
          padding: 0;
          overflow: hidden;
          margin-right: 10px;
          color: @g-999;
          > label {
            .d-block;
            width: 100%;
            height: 160px;
            img {
              .d-layer;
            }
          }
          > span {
            .d-width;
            text-align: center;
            .text-mid-line(30px);
            &:extend(.tm-ellipsis);
          }
          > em.close {
            .fn-set-opacity(0, 0, 0, 0.66);
            margin: 5px 5px 0 0;
          }
          &.upload {
            text-align: center;
            height: 190px;
            border: 1px dashed #dddddd;
            background: #fcfcfc;
            label {
              .d-width;
              cursor: pointer;
            }
            span {
              .d-block;
              .d-center;
              width: 30px;
              height: 30px;
              line-height: 24px;
              border: 1px dashed #dddddd;
              font-size: 32px;
              color: #d7d7d7;
            }
            em {
              .d-block;
              margin-top: 10px;
              font-size: @fs-14;
              line-height: 18px;
              color: #bbbbbb;
            }
          }
        }
      }
      > .select-box {
        .p-rel;
        &.index-big {
          z-index: 100;
          > label {
            &.fb-select-bar {
              width: 78px;
            }
          }
        }
        &.index-small {
          z-index: 60;
        }
        > label {
          .d-in-block;
          margin-right: 10px;
          &.fb-select-bar {
            width: 150px;
            margin-bottom: 15px;
          }
        }
      }
      > div.input-search-box {
        .p-rel;
        > label.form-input {
          width: 360px;
        }
        > .input-search-cont {
          .d-none;
          .p-abs;
          top: 45px;
          left: 0;
          width: 415px;
          height: 200px;
          overflow: auto;
          padding: 8px 0;
          background: @white;
          .border-radius(5px);
          border: 1px solid #dddddd;
          > a {
            .d-block;
            .text-mid-line(34px);
            padding: 0 15px;
            color: @g-999;
            font-size: @fs-14;
            &.match-none {
              color: @main;
              &:hover {
                text-decoration: underline;
              }
            }
            &:hover {
              color: @main;
            }
          }
        }
        > .match-none-tips {
          display: none;
          .p-abs;
          left: 430px;
          top: 50%;
          width: 30px;
          height: 42px;
          margin-top: -21px;
          i {
            .abs-t-mid-l;
            margin-top: -12px;
          }
          label {
            .p-abs;
            top: 41px;
            right: 0;
            display: none;
            width: 200px;
            padding: 10px;
            color: @white;
            .border-radius(3px);
            .fn-set-opacity(0, 0, 0, 0.5);
          }
        }
      }
      > label {
        .d-in-block;
        margin-right: 10px;
        &.fb-check-box, &.fb-radio-box {
          margin-left: 40px;
        }
        &.fb-select-bar {
          width: 150px;
        }
        &.form-input {
          width: 145px;
          &.width {
            width: 360px;
            &.text {
              min-height: 120px;
              padding: 8px;
            }
          }
          &.text {
            width: 70%;
            top: 5px;
          }
        }
      }
      > .check-list-box {
        > label {
          .d-in-block;
          margin: 0;
          width: 110px;
          text-align: left;
          .text-mid-line(42px);
        }
      }
    }
  }
}

//分页
.fb-paging {
  @color: @white;
  @border: #e4e4e4;
  display: block;
  height: 32px;
  margin: 40px auto 20px;
  text-align: center;
  span, a {
    display: inline-block;
    color: @g-333;
    font-size: @fs-14;
  }
  .all {
    display: inline-block;
    margin-right: 10px;
  }
  .select {
    display: inline-block;
    background: @color;
    border: 1px solid @border;
    margin: 0 10px;
    select {
      font-size: @fs-14;
      border: 0 none;
      background: transparent;
      padding: 0 5px;
    }
  }
  .pages {
    display: inline-block;
    font-size: 0;
    a, span {
      height: 30px;
      line-height: 30px;
      padding: 0 12px;
      background: @color;
      border: 1px solid @border;
      //border-left: 0 none;
      margin: 0 5px;
      //&.prev {
      //  border-left: 1px solid @border;
      //}
      &.none {
        color: @g-999;
        cursor: not-allowed;
      }
      &.active {
        background: @main;
        border: 1px solid @main;
        color: @color;
      }
    }
    a:not(.none):hover {
      background: @main;
      border: 1px solid @main;
      color: @color;
    }
  }
  .go {
    display: inline-block;
    margin-left: 10px;
    font-size: @fs-14;
    input {
      display: inline-block;
      width: 32px;
      .tm-center;
      .text-mid-line(30px);
      padding: 0 5px;
      margin: 0 8px;
      background: @color;
      border: 1px solid @border;
    }
  }
}

//模块布局
.fb-module {
  .p-rel;
  .d-width;
  background: @white;
  margin-top: 30px;
  .module-title {
    .p-rel;
    .d-width;
    height: 67px;
    line-height: 68px;
    border-bottom: 1px solid @g-eee;
    font-family: @font-family-YaHei;
    > span {
      .abs-t-mid-l;
      .d-block;
      .text-mid-line(34px);
      font-size: @fs-16;
      color: @g-333;
      font-weight: bold;
      padding-left: 15px;
      margin-top: -17px;
      &.has-icon {
        i {
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 0;
          height: 24px;
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-left: 5px solid @main;
        }
      }
    }
    > .btn {
      float: right;
      margin-right: 30px;
      font-size: @fs-16;
      color: @g-999;
      i {
        .d-in-block;
        position: relative;
        top: 5px;
        right: 5px;
        font-size: 21px;
      }
    }
  }
  .module-cont {
    .p-rel;
    .d-width;
  }
}

//模块布局-文字
.fb-module-text {
  .p-rel;
  .d-block;
  &.border {
    border-bottom: 1px solid #dddddd;
  }
  &.margin {
    margin-top: 50px;
  }
  &.padding {
    padding-bottom: 50px;
  }
  &.small {
    .text-title {
      > span {
        font-size: @fs-18;
      }
      > em {
        width: 88px;
        border-bottom: 2px solid @g-ccc;
      }
    }
  }
  &.center {
    .text-title {
      > span {
        font-size: 24px;
        text-align: center;
      }
      > em {
        width: 88px;
        margin: 8px auto;
        border-bottom: 2px solid @g-333;
      }
    }
  }
  .text-title {
    .d-width;
    margin: 0;
    padding: 0;
    > span {
      .d-block;
      font-size: 24px;
      font-weight: bold;
      color: @g-333;
    }
    > em {
      .d-block;
      width: 50px;
      margin-top: 8px;
      border-bottom: 3px solid @g-333;
    }
  }
  .text-cont {
    .d-width;
    margin-top: 20px;
    > label {
      .d-block;
      margin-bottom: 10px;
      color: @g-666;
      font-size: @fs-14;
    }
    > p {
      font-size: @fs-14;
      line-height: 36px;
      color: @g-666;
    }
    > ol {
      padding: 0 0 0 20px;
      li {
        list-style: initial;
        margin-bottom: 10px;
        color: @g-666;
        font-size: @fs-14;
        > span {
          color: @g-999;
        }
      }
    }
  }
}

//个人中心-左侧菜单
.fb-slide-nav {
  .d-width;
  padding-bottom: 15px;
  .son-nav {
    .d-width;
    label.title {
      .d-block;
      //padding-left: 60px;
      text-align: center;
      .text-mid-line(56px);
      font-size: @fs-14;
      color: @g-333;
      font-weight: bold;
      border-bottom: 1px solid #dddddd;
      i {
        .p-rel;
        top: 2px;
        .d-in-block;
        margin-right: 10px;
      }
    }
    > ul {
      border-bottom: 1px solid #dddddd;
      padding: 10px 0 10px 86px;
      //margin-left: -12px;
      text-align: left;
      li {
        .text-mid-line(40px);
        a {
          .p-rel;
          padding-left: 12px;
          font-size: @fs-14;
          color: @g-999;
          > em {
            .p-abs;
            top: 50%;
            width: 16px;
            .text-mid-line(16px);
            font-size: 12px;
            color: @white;
            text-align: center;
            margin: -8px 0 0 5px;
            background: #ff7f66;
            .border-radius(50%);
          }
          i {
            .abs-t-mid-l;
            margin-top: -5px;
            border-style: solid;
            border-width: 5px;
            margin-right: 3px;
            display: none;
          }
          &:hover, &.active {
            color: @main;
            i {
              display: inline-block;
              border-color: transparent transparent transparent @main;
            }
          }
        }
      }
    }
    &:last-child {
      > ul {
        border-bottom: 0 none;
      }
    }
  }
}

//loading样式
.fb-loading-bar {
  .abs-tl-mid;
  .d-block;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  vertical-align: middle;
  text-align: center;
  color: @g-999;
  > i {
    .abs-tl-mid;
    .d-block;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    -webkit-animation: rotate 1s steps(12, end) infinite;
    -moz-animation: rotate 1s steps(12, end) infinite;
    -o-animation: rotate 1s steps(12, end) infinite;
    animation: rotate 1s steps(12, end) infinite;
  }
}

//列表加载loading
.fb-list-loading {
  .d-width;
  .text-mid-line(36px);
  text-align: center;
  color: #aaaaaa;
  &.background {
    background: @white;
  }
  &.g-f5 {
    background: @g-f5f5;
  }
  i {
    display: inline-block;
    width: 15px;
    height: 15px;
    position: relative;
    top: 3px;
    margin-right: 3px;
  }
  img {
    .d-layer;
  }
  span {
    color: @g-666;
    font-size: @fs-12;
  }
}

//弹窗
.fb-pop-disk {
  .p-fixed;
  top: 0;
  left: 0;
  z-index: 999;
  .d-layer;
  .d-none;
  .fn-set-opacity(0, 0, 0, 0.5);

  .fb-pop-box {
    @height: 40px;
    @big-height: 50px;
    .abs-tl;
    .d-block;
    width: 100%;
    height: 100%;

    .fb-pop-bg {
      .d-layer;
      background: @white;
      &.gray {
        background: @g-f5f5;
      }
      &.transparent {
        background: transparent;
      }
      &.has-hd {
        .p-rel;
        padding-top: @height + 1;
        &.big {
          padding-top: @big-height + 1;
          .fb-disk-hd {
            height: @big-height;
            .text-mid-line-bor(@big-height + 1, 1px);

            .fb-close-btn, .fb-back-btn {
              width: @big-height;
              height: @big-height;
            }
          }
        }
        .fb-disk-hd {
          .abs-tl;
          width: 100%;
        }
      }
      &.right {
        width: 75%;
        float: right;
      }
      &.left {
        width: 75%;
        float: left;
      }
      &.bottom {
        .abs-bl;
        height: 60%;
      }
      &.bto-full {
        .abs-bl;
        height: 100%;
      }
    }

    .fb-disk-hd {
      .p-rel;
      .d-block;
      height: @height;
      .text-mid-line-bor(@height + 1, 1px);
      padding: 0 15px;
      border-bottom: 1px solid @white;
      font-size: @fs-14;
      color: @g-333;
      font-weight: bold;
      text-align: center;
      &.gray {
        background: @g-f5f5;
        border-bottom: 1px solid @g-eee;
      }
      &.white {
        background: @white;
        border-bottom: 1px solid @g-eee;
      }

      &.title-icon {
        text-align: left;
        font-size: @fs-16;
        font-weight: normal;
        padding-left: 40px;
        i.icon {
          .abs-t-mid-l;
          left: 10px;
          .fn-set-transform(scale(0.6));
          margin: -15px 0 0 0;
        }
      }

      .fb-close-btn, .fb-back-btn {
        .abs-tr;
        width: @height;
        height: @height;

        &.text {
          width: 60px;
          i {
            font-size: @fs-14;
            font-family: @font-family-YaHei !important;
          }
        }

        i {
          .abs-tl-mid;
          margin: -14px 0 0 -14px;
          width: 28px;
          .text-mid-line(28px);
          color: @g-666;
          font-size: 22px;
          text-align: center;
          vertical-align: middle;
          font-weight: normal;
          font-family: @font-family-SongTi !important;
        }
      }
      .fb-back-btn {
        .d-none;
        right: auto;
        left: 0;
      }
      .fb-disk-title {
        .d-width;
      }
    }

    .fb-disk-bd {
      .p-rel;
      .d-layer;
    }
  }

  .fb-disk-loading {
    .abs-tl;
    .d-layer;
    .d-none;
    .fn-set-opacity(255, 255, 255, .5);
    &.common-loading {
      .d-block;
      .fn-set-opacity(0, 0, 0, .3);
      label {
        img {
          width: 70px;
          height: 70px;
        }
        span {
          color: @white;
          font-size: @fs-14;
          margin-top: 8px;
        }
      }
    }
    label {
      .d-block;
      img {
        .d-block;
        width: 50px;
        height: 50px;
        margin: auto;
      }
      span {
        .d-width;
        text-align: center;
        .text-mid-line(24px);
        font-size: @fs-12;
        color: @g-666;
      }
    }
  }
}

//switch开关
.fb-switch {
  .fn-set-layout("block", 49px, 24px);
  overflow: hidden;
  background: @g-999;
  .border-radius(3px);
  padding: 2px;
  .fn-set-transition(all 0.3s ease);
  &.active {
    background: #78d471;
    label.box {
      left: 25px;
    }
  }
  &.radius {
    .border-radius(15px);
  }
  label.box {
    .p-rel;
    .d-layer;
    left: 0;
    width: 70px;
    .fn-set-transition(all 0.3s ease);
    float: right;
    span {
      .fn-set-layout("block", 25px, 100%);
      z-index: 100;
      .fl;
      &.btn {
        .fn-set-layout("block", 20px, 20px);
        .border-radius(50%);
        background: @white;
      }
      &.on, &.off {
        color: @white;
        line-height: 20px;
        font-size: @fs-12;
        text-align: center;
      }
    }
    input[type="checkbox"] {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      visibility: hidden;
    }
  }
}

//tab切换卡
.fb-tab-box {
  .p-rel;
  .d-width;
  border-top: 1px solid @g-eee;
  padding: 0 15px;
  .tab-nav {
    .p-rel;
    .d-width;
    .text-mid-line(40px);
    border-bottom: 1px solid @g-eee;
    > em {
      .p-rel;
      top: 9px;
      .d-block;
      height: 18px;
      float: left;
      margin: 0 15px;
      border-left: 1px solid @g-eee;
    }
    > a {
      .p-rel;
      .d-block;
      padding: 0 8px;
      text-align: center;
      height: 100%;
      color: @g-666;
      font-size: @fs-14;
      float: left;
      &:before {
        .d-block;
        .abs-t-mid-l;
        height: 18px;
        margin-top: -9px;
        //content: "";
        border-left: 1px solid @g-eee;
      }
      &.active {
        color: @main;
        &:after {
          .p-abs;
          left: 0;
          bottom: -1px;
          .d-block;
          width: 100%;
          content: "";
          border-bottom: 2px solid @main;
        }
      }
    }
  }
  .tab-cont {
    .p-rel;
    .d-width;
  }
}

/*
*公共输入框
*border-边框模式
*background-背景模式
*text-文本域模式
*/
.form-input {
  @height: 40px;
  @height-big: 50px;
  @height-small: 30px;
  .p-rel;
  .d-block;
  .text-mid-line-bor(@height + 1, 1px);
  padding: 0 15px;
  &.before-text {
    padding-left: 22px;
    span {
      .abs-tl;
      .d-block;
      width: 50px;
      height: 100%;
    }
    i {
      .abs-t-mid-l;
    }
    em {
      .p-abs;
      left: 0;
      top: 50%;
      margin-top: -10px;
      font-size: @fs-18;
      display: block;
      .text-mid-line(20px);
      text-align: left;
      color: @g-333;
    }
  }
  &.before-icon {
    padding-left: 35px;
    em {
      .abs-t-mid-l;
    }
  }
  &.after-text {
    padding-right: 30px;
    em {
      &:extend(.form-input.before-text em all);
      color: @g-666;
      left: auto;
      right: 0;
    }
    &.clean {
      a.clean-btn, label.clean-btn {
        right: 25px;
      }
    }
  }
  &.line-block {
    display: inline-block;
  }
  &.small {
    .text-mid-line-bor(@height-small + 1, 1px);
    &.block {
      input {
        &[type="text"], &[type="password"], &[type="number"] {
          top: 5px;
        }
      }
    }
    input {
      &[type="text"], &[type="password"], &[type="number"] {
        font-size: @fs-14;
      }
    }
  }
  &.big {
    .text-mid-line-bor(@height-big + 1, 1px);
    &.block {
      input {
        &[type="text"], &[type="password"], &[type="number"] {
          top: 13px;
        }
      }
    }
    input {
      &[type="text"], &[type="password"], &[type="number"] {
        font-size: @fs-14;
      }
    }
  }
  &.background {
    &.white {
      border: 1px solid @white;
      background: @white;
    }
  }
  &.radius {
    .border-radius(3px);
  }
  &.border {
    background: @white;
    &.error {
      border: 1px solid @error-color !important;
      input {
        color: @error-color;
      }
    }
    &.gray {
      border: 1px solid #dddddd;
    }
    &.tb {
      border-left: 0 none;
      border-right: 0 none;
    }
    &.bto{
      border-bottom: 1px solid #d4d4d4;
    }
  }
  &.clean {
    padding-right: 40px;
    a.clean-btn, label.clean-btn {
      .d-none;
      .p-abs;
      top: 50%;
      right: 10px;
      width: 20px;
      height: 20px;
      line-height: 21px;
      margin-top: -10px;
      font-size: 20px;
      color: @g-999;
      font-family: @font-family-SongTi;
      cursor: pointer;
    }
  }
  &.block {
    input {
      &[type="text"], &[type="password"], &[type="number"] {
        .d-width;
        top: 10px;
      }
    }
  }
  &.text {
    height: 60px;
    line-height: normal;
    padding: 5px 8px;
    &.big {
      height: 200px;
      padding: 8px 15px;
    }
    textarea {
      .d-layer;
      font-size: @fs-14;
      line-height: 20px;
      color: @g-333;
      resize: none;
      background: transparent;
      border: 0 none;
    }
  }
  &.readonly {
    background: #eeeeee;
    cursor: not-allowed;
    input {
      cursor: not-allowed;
    }
  }
  input {
    &[type="text"], &[type="password"], &[type="number"] {
      .d-in-block;
      width: 100%;
      height: 100%;
      //.text-mid-line(20px);
      border: 0 none;
      font-size: @fs-14;
      background: transparent;
    }
  }
}

/*
*公共按钮
*line-边框模式
*background-背景模式
*/
.fb-btn {
  .fn-button-style(100%, 40px, @white, @main, @main, 5px);
  &.line-block {
    .d-in-block;
    width: auto;
    padding: 0 20px;
  }
  &.small {
    .text-mid-line(34px);
  }
  &.big {
    .text-mid-line(50px);
    font-size: @fs-20;
  }
  &.bigger {
    .text-mid-line(68px);
    font-size: @fs-20;
  }
  &.background {
    background: transparent;
    &.hover {
      &:hover {
        background: #04a3e5;
      }
    }
    &.red {
      @color: @error-color;
      background: @color;
    }
    &.blue {
      @color: @main;
      background: @color;
    }
    &.orange {
      @color: #ff7f66;
      background: @color;
    }
  }
}

/*
*列表布局
*row-1至row-6等
*/
.fb-box-list {
  .d-width;
  & > ul {
    margin: 0;
    padding: 0;
    zoom: 1;
    &:after {
      display: block;
      content: "";
      clear: both;
      visibility: visible;
      height: 0;
      zoom: 1;
    }
    & > li {
      .d-width;
      .fl;
    }
    &.row-1 {
      & > li {
        width: 100%;
      }
    }
    &.row-2 {
      & > li {
        width: 50%;
      }
    }
    &.row-3 {
      & > li {
        width: 33.33%;
      }
    }
    &.row-4 {
      & > li {
        width: 25%;
      }
    }
    &.row-5 {
      & > li {
        width: 20%;
      }
    }
    &.row-6 {
      & > li {
        width: 16.66%;
      }
    }
  }
}

/*
*三角样式
*top,down,left,right
*/
.fb-arrow-dir {
  &.top {
    @color: transparent transparent @g-666 transparent;
    .fn-arrow-dir(4px, @color);
  }
  &.down {
    @color: @g-666 transparent transparent transparent;
    .fn-arrow-dir(4px, @color);
  }
  &.left {
    @color: transparent @g-666 transparent transparent;
    .fn-arrow-dir(4px, @color);
  }
  &.right {
    @color: transparent transparent transparent @g-666;
    .fn-arrow-dir(4px, @color);
  }
}

/*
*圆角
*3，5，10，50%
*/
.fb-border-radius {
  &.radius3 {
    .border-radius(3px) !important;
  }
  &.radius5 {
    .border-radius(5px) !important;
  }
  &.radius10 {
    .border-radius(10px) !important;
  }
  &.radius50 {
    .border-radius(50%) !important;
  }
}

/*
*去掉边框
*bd-no-left
*bd-no-right
*bd-no-top
*bd-no-bottom
*bd-no-all
*/
.fn-border-none();

/*
*生成字体大小
*8-40px
*/
.font-size(40);

/*
*样式函数
*页面生成样式函数
*/
//设置阴影
.fn-box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
  -moz-box-shadow: @shadow;
  -o-box-shadow: @shadow;
  box-shadow: @shadow;
}

//设置过滤
.fn-set-transition(@cont) {
  @o: -o-;
  @ms: -ms-;
  @moz: -moz-;
  @webkit: -webkit-;
  transition: @cont;
    @{o}transition: @cont;
    @{ms}transition: @cont;
    @{moz}transition: @cont;
    @{webkit}transition: @cont;
}

//设置转换
.fn-set-transform(@cont) {
  transform: @cont;
  -o-transform: @cont;
  -ms-transform: @cont;
  -moz-transform: @cont;
  -webkit-transform: @cont;
}

//设置转换中心
.fn-set-transform-origin(@cont) {
  transform-origin: @cont;
  -o-transform-origin: @cont;
  -ms-transform-origin: @cont;
  -moz-transform-origin: @cont;
  -webkit-transform-origin: @cont;
}

//设置按钮样式
.fn-button-style(@w,@h,@tc,@bg,@bc,@r) {
  .fn-set-layout(block, @w, @h);
  .text-mid-line(@h);
  .border-radius(@r);
  .text-color(@tc);
  font-size: @fs-14;
  .tm-center;
  background: e(@bg);
  &.radius {
    .border-radius(30px);
  }
  &.link {
    background: transparent;
    border: 0 none;
  }
  &.line {
    background: transparent;
    border: 1px solid @bc;
    &.white {
      border: 1px solid #FFFFFF;
      color: @g-333;
    }
    &.gray {
      border: 1px solid #dddddd;
      color: @g-333;
      &.active {
        background: #f7f7f7;
        color: @g-666;
      }
      &.dark {
        background: @g-999;
        border: 1px solid @g-999;
        color: @white;
      }
    }
    &.blue {
      border: 1px solid @main;
      color: @main;
      &.active, &.current {
        background: @main;
        color: @white;
      }
    }
  }
  &.no-bd {
    border: 0 none;
  }
}

//设置三角函数
.fn-arrow-dir(@width:8px,@color) {
  .d-in-block;
  width: 0;
  height: 0;
  border: @width solid;
  border-color: @color;
}

//设置文字渐变
.fn-text-gradient(@s:#03d6ff,@e:#038aff) {
  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(@s), to(@e));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

//去掉边框
.fn-border-none(@border:@border-string) {
  .fn-border-type(@i:1) when (@i<length(@border)) {
    @string: e(extract(@border-string, @i));
    .bd-no-@{string} {
      border-@{string}: 0 none !important;
    }
    .fn-border-type(@i+1);
  }
  .fn-border-type(@i:1) when (@i=length(@border)) {
    @string: e(extract(@border-string, @i));
    .bd-no-@{string} {
      border: 0 none !important;
    }
  }
  .fn-border-type;
}

//设置角度
.border-radius(@radius:5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

//设置透明度
.fn-set-opacity-n(@num) {
  @op: @num * 100;
  opacity: @num;
  filter: alpha(opacity=@op);
}

//设置透明背景
.fn-set-opacity(@r,@g,@b,@a) {
  @c: rgba(@r, @g, @b, @a);
  @c2: argb(@c);
  filter: ~"progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='@{c2}', endColorstr='@{c2}')";
  background: @c;
  :root & {
    filter: none;
  }
}

//设置背景图大小
.fn-set-background-size(@size) {
  -moz-background-size: @size;
  -webkit-background-size: @size;
  background-size: @size;
}

//设置字体大小
.font-size(@n, @i: 8) when (@i =< @n) {
  .fs-@{i} {
    font-size: unit(@i, px) !important;
  }
  .font-size(@n, (@i+1));
}

//设置z-index
.fn-set-index-list(@n:100, @i: 11) when (@i =< @n) {
  .z-index-@{i} {
    z-index: @i !important;
  }
  .fn-set-index-list(@n, (@i+1));
}

.fn-set-index-list();

/*
*基础辅助样式
*字体等多种样
*/
//手势
.cursor-pointer {
  cursor: pointer;
}

.cursor-move {
  cursor: move;
}

.cursor-def {
  cursor: default;
}

//字体模式-tm{text-module}
.tm-bold {
  font-weight: bold !important;
}

.tm-light {
  font-weight: normal !important;
}

.tm-uline {
  text-decoration: underline !important;
}

.tm-del {
  text-decoration: line-through !important;
}

.tm-none {
  text-decoration: none !important;
}

.tm-center {
  text-align: center !important;
}

.tm-left {
  text-align: left !important;
}

.tm-right {
  text-align: right !important;
}

.tm-ellipsis {
  .ft-ellipsis;
}

.tm-clamp {
  .ft-clamp(2);
}

.tm-mid {
  vertical-align: middle;
}

.tm-top {
  vertical-align: top;
}

.tm-bto {
  vertical-align: bottom;
}

.tm-indent {
  text-indent: 2em;
}

//字体颜色-tc{text-color}
.tc-333 {
  .text-color(@g-333) !important;
}

.tc-666 {
  .text-color(@g-666) !important;
}

.tc-999 {
  .text-color(@g-999) !important;
}

.tc-ccc {
  .text-color(@g-ccc) !important;
}

.tc-fff {
  .text-color(@white) !important;
}

.tc-yellow {
  .text-color(#ffad36) !important;
}

.tc-red {
  .text-color(#c80a32) !important;
}

.tc-main {
  .text-color(@main) !important;
}

.tc-orange {
  .text-color(#fe693b) !important;
}

.tc-error {
  .text-color(@error-color) !important;
}

.tc-success {
  .text-color(@success-color) !important;
}

.tc-waring {
  .text-color(@waring-color) !important;
}

//字体样式
.ft-family(@font-family:@font-family-Helvetica) {
  font-family: @font-family;
}

.ft-style(@type:normal) {
  font-style: @type;
}

.ft-weight(@weight:normal) {
  font-weight: @weight;
}

.ft-decoration(@type:none) {
  text-decoration: @type;
}

.ft-wrap() {
  text-wrap: wrap;
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.ft-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

.ft-clamp(@line:2) {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @line
}

.fs-number(@size:12,@unit:px) {
  font-size: unit(@size, @unit) !important;
}

.text-color(@color:@g-333) {
  color: @color;
}

.text-mid-line(@height) {
  height: @height;
  line-height: @height;
}

.text-mid-line-bor(@h,@b:2) {
  height: @h;
  line-height: @h - @b;
}

/*loading 动画*/
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg)
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg)
  }
}

/*
*css3-transform
*/
/*左侧进入*/
.animated-left {
  .fn-set-transform(translate3d(100%, 0, 0));
  .fn-set-transition(transform 0.5s 0s);
}

/*右侧进入*/
.animated-right {
  .fn-set-transform(translate3d(-100%, 0, 0));
  .fn-set-transition(transform 0.5s 0s);
}

/*上方进入*/
.animated-top {
  .fn-set-transform(translate3d(0, -100%, 0));
  .fn-set-transition(transform 0.5s 0s);
}

/*下方进入*/
.animated-bottom {
  .fn-set-transform(translate3d(0, 100%, 0));
  .fn-set-transition(transform 0.5s 0s);
}

.animated-left.active,
.animated-right.active,
.animated-top.active,
.animated-bottom.active {
  .fn-set-transform(translate3d(0, 0, 0));
}